<template>
  <view class="detail-container">
   
    <!-- 取餐号部分 -->
    <view class="pickup-card">
      <view class="pickup-label">取餐号</view>
      <view class="pickup-number">T008</view>
      <view class="pickup-desc">共3杯饮品制作中，预计7分钟后取餐</view>
    </view>

    <!-- 店铺信息 -->
    <view class="shop-info">
      <view class="shop-name">KKmall京基店2楼188号 <text class="icon-right">></text></view>
    </view>

    <!-- 订单商品 -->
    <view class="order-goods">
      <view class="goods-item" v-for="(item, index) in orderItems" :key="index">
        <view class="goods-left">
          <image class="goods-image" :src="item.image" mode="aspectFill"></image>
          <view class="goods-info">
            <view class="goods-name">{{ item.name }}</view>
            <view class="goods-spec">{{ item.spec }}</view>
          </view>
        </view>
        <view class="goods-right">
          <view class="goods-price">¥{{ item.price }}</view>
          <view class="goods-quantity">x{{ item.quantity }}</view>
        </view>
      </view>

      <!-- 商品总计 -->
      <view class="goods-total">
        <text>共3件商品，合计</text>
        <text class="total-price">¥70</text>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info">
      <view class="info-title">订单信息</view>
      <view class="info-item">
        <text class="info-label">下单时间：</text>
        <text class="info-value">2024.8.5 16:20</text>
      </view>
      <view class="info-item">
        <text class="info-label">订单编号：</text>
        <text class="info-value">Y88373223345625667</text>
      </view>
      <view class="info-item">
        <text class="info-label">订单备注：</text>
        <text class="info-value">少冰</text>
      </view>
    </view>

    <!-- 底部提示 -->
    <view class="bottom-tips">
      <text>如需退款，请联门店</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as uniApi from '@/common/utils/uni-api.js';

// 定义订单商品数据
const orderItems = ref([
  {
    id: 1,
    name: '招牌曼打酒男柠檬茶',
    spec: '少冰/少糖',
    price: '18',
    quantity: 3,
    image: '/static/images/drink1.png'
  },
  {
    id: 2,
    name: '莓打凤梨冰柠茶',
    spec: '少冰/少糖',
    price: '16',
    quantity: 1,
    image: '/static/images/drink2.png'
  }
]);

// 返回上一页
const goBack = () => {
  uniApi.navigateBack();
};

// 生命周期钩子
onMounted(() => {
  // 如果需要从服务器获取订单详情，可以在这里调用
});
</script>

<style lang="scss" scoped>
.detail-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 40rpx;
}

// 顶部导航栏
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #fff;
  
  .left-icon {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .icon-back {
      font-size: 36rpx;
      font-weight: bold;
    }
  }
  
  .title {
    font-size: 32rpx;
    font-weight: bold;
  }
  
  .right-icons {
    display: flex;
    align-items: center;
    
    .icon-more, .icon-share {
      margin-left: 30rpx;
      font-size: 36rpx;
    }
  }
}

// 取餐号卡片
.pickup-card {
  margin: 30rpx;
  padding: 40rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .pickup-label {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
  }
  
  .pickup-number {
    font-size: 56rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .pickup-desc {
    font-size: 24rpx;
    color: #999;
    text-align: center;
  }
}

// 店铺信息
.shop-info {
  margin: 0 30rpx 30rpx;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  
  .shop-name {
    font-size: 28rpx;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .icon-right {
      color: #ccc;
      font-size: 24rpx;
    }
  }
}

// 订单商品
.order-goods {
  margin: 0 30rpx 30rpx;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  
  .goods-item {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0;
    border-bottom: 1px solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .goods-left {
      display: flex;
      align-items: center;
      flex: 1;
      overflow: hidden;
      
      .goods-image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
        background-color: #f0f0f0;
      }
      
      .goods-info {
        flex: 1;
        overflow: hidden;
        
        .goods-name {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 8rpx;
          font-weight: 500;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .goods-spec {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
    
    .goods-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      
      .goods-price {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 8rpx;
      }
      
      .goods-quantity {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  
  .goods-total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 20rpx;
    margin-top: 20rpx;
    border-top: 1px solid #f5f5f5;
    font-size: 28rpx;
    color: #333;
    
    .total-price {
      font-weight: bold;
      margin-left: 10rpx;
    }
  }
}

// 订单信息
.order-info {
  margin: 0 30rpx 30rpx;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  
  .info-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .info-item {
    display: flex;
    padding: 10rpx 0;
    font-size: 26rpx;
    
    .info-label {
      color: #666;
      width: 180rpx;
    }
    
    .info-value {
      color: #333;
      flex: 1;
    }
  }
}

// 底部提示
.bottom-tips {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  padding: 30rpx 0;
}
</style> 